<template>
  <div>
    <canvas ref="qrCanvas"></canvas>
  </div>
</template>

<script>
import QRCode from 'qrcode'

export default {
  name: 'QrCode',
  props: {
    text: {
      type: String,
      required: true
    },
    size: {
      type: Number,
      default: 200
    }
  },
  mounted() {
    this.generateQrCode()
  },
  methods: {
    generateQrCode() {
      QRCode.toCanvas(this.$refs.qrCanvas, this.text, {
        width: this.size,
        color: {
          dark: '#008000', // 暗部颜色
          light: '#ffffff' // 亮部颜色
        },
        errorCorrectionLevel: 'H' // 纠错级别
      })
    },
    // generateQrCode() {
    //   QRCode.toCanvas(this.$refs.qrCanvas, this.text, { width: this.size })
    // }
  }
}
</script>